<!--
 * @Author: your name
 * @Date: 2021-09-06 15:08:23
 * @LastEditTime: 2021-09-06 16:51:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\5-javascript\day11\8-ceshi.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="one" name="first" class="first">
        <div>hello</div>
        <div>world</div>
    </div>
    <div id="two">
        <!-- 注释 -->
        <p></p>
    </div>
</body>
<script>
    console.log("function Node", Node); //除了IE之外，在其他所有浏览器中都可以访问到这个类型，新版本IE（大于9）可以使用
    console.log("document obj", document);
    // 获取body元素
    var body = document.body;
    console.log("body", body);
    // 判断类型
    //nodeType:节点类型
    console.log("body.nodeType", body.nodeType); //1 Element
    // 标签名字
    console.log("body.nodeName", body.nodeName.toLowerCase()); //body
    // 标签值
    console.log("body.nodeValue", body.nodeValue); //null
    //信息判断
    console.log("body.ownerDocument", body.ownerDocument); //HTMLDocument
    console.log(body.ownerDocument === document); //true
    console.log(body.hasChildNodes()); //true
    // 获取父节点
    console.log("body.parentNode", body.parentNode); //<html>
    // 获取子节点 测试childNodes  在不同浏览器下的结果
    console.log("body.childNodes", body.childNodes); //NodeList
    console.log("body.childNodes.length", body.childNodes.length);
    //将类数组对象转换为数组，并过滤出元素节点
    var childs = body.childNodes;
    var arr = Array.prototype.slice.call(childs, 0);
    var result = arr.filter(function(item) {
        // 过滤元素节点  nodeType=1  Element
        return item.nodeType == 1;
    });
    console.log("body.childNodes", result); //Array 没有#text
    //类数组对象可以调用数组的方法吗？   不可以调用数组中的方法
    //arr.slice(begin, end)  [begin,ben)返回一个新的数组对象
    /*arr.slice()    //正确
    childs.slice()  //错误
    slice.call(childs,0)  //正确*/

    var one = document.getElementById("one");
    console.log('baseURI element:', one.baseURI);
    console.log('baseURI document:', document.baseURI);
    //获取所有子节点-Node
    console.log('childNodes List:', one.childNodes); //NodeList
    console.log(one.firstElementChild); //div hello
    console.log(one.childNodes[0].nodeName); //#text  空白
    console.log(one.childNodes[1].nodeType == Node.ELEMENT_NODE);
    //true
    console.log(one.nextSibling.nextSibling); //div#tow
    // 获取所有子元素-Element
    console.log("children element:", one.children); //HTMLCollection
    console.log("children element:", one.children.item(1));
    // 获取one的信息
    console.log("innerHTML", one.innerHTML);
    console.log("attributes", one.attributes);
    one.setAttribute("class", "second");
    //节点操作
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    // 将节点two克隆一份，并且修改id
    //如果写了参数true,则代表深复制。浅复制是默认的
    var two_copy = two.cloneNode(true);
    var two_copy_2 = two.cloneNode(true);
    two_copy.setAttribute("id", "two_copy");
    two_copy_2.setAttribute("id", "two_copy_2");
    // 将克隆的节点追加到one孩子的最后
    one.appendChild(two_copy);
    one.appendChild(two_copy); //添加子元素到父元素中，并放到最后，每个节点对象只能出现一次
    one.insertBefore(two_copy_2, two_copy); //把two_copy_2插入到two_copy之前
</script>

</html>